{% extends "base.html" %}

{% set current_page = 'home' %}

{% block title %}工作台{% endblock %}

{% block extra_css %}
<style>
    /* PingCode风格首页样式 */
    .pingcode-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 24px;
    }
    
    /* 顶部操作栏 */
    .action-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }
    
    .quick-actions {
        display: flex;
        gap: 12px;
    }
    
    .action-btn {
        padding: 8px 16px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background: white;
        color: #374151;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .action-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }
    
    .primary-btn {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }
    
    .primary-btn:hover {
        background: #2563eb;
        border-color: #2563eb;
    }
    
    /* 数据概览区域 */
    .stats-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    
    .stat-card-pingcode {
        background: white;
        border-radius: 8px;
        padding: 20px;
        border: 1px solid #e5e7eb;
        transition: all 0.2s;
    }
    
    .stat-card-pingcode:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    
    .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    
    .stat-title {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .stat-value {
        font-size: 28px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }
    
    .stat-change {
        font-size: 12px;
        color: #10b981;
    }
    
    .stat-change.negative {
        color: #ef4444;
    }
    
    /* 工作区切换 */
    .workspace-switcher {
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        padding: 16px;
        margin-bottom: 24px;
    }
    
    .workspace-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .workspace-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }
    
    .workspace-list {
        display: flex;
        gap: 12px;
        overflow-x: auto;
    }
    
    .workspace-item {
        min-width: 200px;
        padding: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .workspace-item:hover {
        border-color: #3b82f6;
        background: #f8fafc;
    }
    
    .workspace-item.active {
        border-color: #3b82f6;
        background: #eff6ff;
    }
    
    /* 主要内容区域 */
    .main-content {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 24px;
    }
    
    /* 左侧内容 */
    .content-left {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    /* 我的任务 */
    .tasks-section {
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .section-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }
    
    .section-more {
        font-size: 14px;
        color: #6b7280;
        cursor: pointer;
    }
    
    .section-more:hover {
        color: #374151;
    }
    
    .task-list {
        padding: 0;
    }
    
    .task-item-pingcode {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .task-item-pingcode:hover {
        background: #f9fafb;
    }
    
    .task-item-pingcode:last-child {
        border-bottom: none;
    }
    
    .task-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 8px;
    }
    
    .task-name {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        flex: 1;
        margin-right: 12px;
    }
    
    .task-priority {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .priority-high {
        background: #fee2e2;
        color: #dc2626;
    }
    
    .priority-medium {
        background: #fef3c7;
        color: #d97706;
    }
    
    .priority-low {
        background: #dbeafe;
        color: #2563eb;
    }
    
    .task-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        color: #6b7280;
    }
    
    .task-project {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .task-due {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    /* 项目进度 */
    .projects-section {
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .project-list {
        padding: 0;
    }
    
    .project-item-pingcode {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .project-item-pingcode:last-child {
        border-bottom: none;
    }
    
    .project-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    
    .project-name {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
    }
    
    .project-progress {
        font-size: 12px;
        color: #6b7280;
    }
    
    .progress-bar-container {
        height: 6px;
        background: #f3f4f6;
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 4px;
    }
    
    .progress-bar-fill {
        height: 100%;
        background: #3b82f6;
        border-radius: 3px;
        transition: width 0.3s ease;
    }
    
    .project-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #6b7280;
    }
    
    /* 右侧边栏 */
    .sidebar-right {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    /* 快速统计 */
    .quick-stats {
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        padding: 20px;
    }
    
    .quick-stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .quick-stat-item:last-child {
        border-bottom: none;
    }
    
    .quick-stat-label {
        font-size: 14px;
        color: #6b7280;
    }
    
    .quick-stat-value {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }
    
    /* 最近活动 */
    .activities-section {
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .activity-list {
        padding: 0;
    }
    
    .activity-item-pingcode {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        gap: 12px;
    }
    
    .activity-item-pingcode:last-child {
        border-bottom: none;
    }
    
    .activity-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #6b7280;
        flex-shrink: 0;
    }
    
    .activity-content {
        flex: 1;
    }
    
    .activity-text {
        font-size: 14px;
        color: #374151;
        margin-bottom: 4px;
    }
    
    .activity-time {
        font-size: 12px;
        color: #9ca3af;
    }
    
    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #6b7280;
    }
    
    .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        color: #d1d5db;
    }
    
    .empty-text {
        font-size: 14px;
    }
    
    /* 响应式设计 */
    @media (max-width: 1024px) {
        .main-content {
            grid-template-columns: 1fr;
        }
        
        .sidebar-right {
            order: -1;
        }
    }
    
    @media (max-width: 768px) {
        .pingcode-container {
            padding: 16px;
        }
        
        .stats-overview {
            grid-template-columns: 1fr;
        }
        
        .workspace-list {
            flex-direction: column;
        }
        
        .quick-actions {
            flex-wrap: wrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="pingcode-container">
    <!-- 顶部操作栏 -->
    <div class="action-bar">
        <h1 class="text-2xl font-bold text-gray-900">工作台</h1>
        <div class="quick-actions">
            <button class="action-btn primary-btn" onclick="window.location.href='{{ url_for('task.my_tasks') }}'">
                <i class="fas fa-plus mr-2"></i>新建任务
            </button>
            <button class="action-btn" onclick="window.location.href='{{ url_for('project.create_project') }}'">
                <i class="fas fa-folder-plus mr-2"></i>新建项目
            </button>
            <button class="action-btn" onclick="window.location.href='{{ url_for('customer.list_customers') }}'">
                <i class="fas fa-user-plus mr-2"></i>新建客户
            </button>
        </div>
    </div>

    <!-- 数据概览 -->
    <div class="stats-overview">
        <div class="stat-card-pingcode">
            <div class="stat-header">
                <div class="stat-icon bg-blue-100 text-blue-600">
                    <i class="fas fa-folder-open"></i>
                </div>
            </div>
            <div class="stat-value">{{ stats.project_count if stats else 0 }}</div>
            <div class="stat-title">项目总数</div>
            <div class="stat-change">+2 本周新增</div>
        </div>
        
        <div class="stat-card-pingcode">
            <div class="stat-header">
                <div class="stat-icon bg-green-100 text-green-600">
                    <i class="fas fa-tasks"></i>
                </div>
            </div>
            <div class="stat-value">{{ stats.my_tasks_count if stats else 0 }}</div>
            <div class="stat-title">我的任务</div>
            <div class="stat-change">{{ stats.completed_tasks if stats else 0 }} 已完成</div>
        </div>
        
        <div class="stat-card-pingcode">
            <div class="stat-header">
                <div class="stat-icon bg-purple-100 text-purple-600">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <div class="stat-value">{{ stats.customer_count if stats else 0 }}</div>
            <div class="stat-title">客户数量</div>
            <div class="stat-change">+5 本月新增</div>
        </div>
        
        <div class="stat-card-pingcode">
            <div class="stat-header">
                <div class="stat-icon bg-yellow-100 text-yellow-600">
                    <i class="fas fa-clock"></i>
                </div>
            </div>
            <div class="stat-value">{{ stats.monthly_hours if stats else 0 }}h</div>
            <div class="stat-title">本月工时</div>
            <div class="stat-change">{{ stats.weekly_hours if stats else 0 }}h 本周</div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 左侧内容 -->
        <div class="content-left">
            <!-- 我的任务 -->
            <div class="tasks-section">
                <div class="section-header">
                    <h2 class="section-title">我的任务</h2>
                    <a href="{{ url_for('task.my_tasks') }}" class="section-more">查看全部 →</a>
                </div>
                <div class="task-list">
                    {% if my_tasks %}
                        {% for task in my_tasks[:8] %}
                        <div class="task-item-pingcode" onclick="window.location.href='{{ url_for('task.get_task_details', task_id=task.id) if task.id else '#' }}'">>
                            <div class="task-header">
                                <div class="task-name">{{ task.name }}</div>
                                <span class="task-priority priority-{{ task.priority|lower if task.priority else 'medium' }}">
                                    {{ task.priority if task.priority else '中' }}
                                </span>
                            </div>
                            <div class="task-meta">
                                <div class="task-project">
                                    <i class="fas fa-folder text-xs"></i>
                                    <span>{{ task.project.name if task.project else '未分配' }}</span>
                                </div>
                                <div class="task-due">
                                    <i class="fas fa-calendar text-xs"></i>
                                    <span>{{ task.due_date.strftime('%m月%d日') if task.due_date else '无期限' }}</span>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-tasks"></i>
                            </div>
                            <div class="empty-text">暂无任务</div>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 项目进度 -->
            <div class="projects-section">
                <div class="section-header">
                    <h2 class="section-title">项目进度</h2>
                    <a href="{{ url_for('project.list_projects') }}" class="section-more">查看全部 →</a>
                </div>
                <div class="project-list">
                    {% if projects %}
                        {% for project in projects[:6] %}
                        <div class="project-item-pingcode">
                            <div class="project-header">
                                <div class="project-name">{{ project.name }}</div>
                                <div class="project-progress">{{ project.progress }}%</div>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar-fill" style="width: {{ project.progress }}%"></div>
                            </div>
                            <div class="project-meta">
                                <span>{{ project.status }}</span>
                                <span>{{ project.start_date.strftime('%Y-%m-%d') if project.start_date else '-' }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-folder-open"></i>
                            </div>
                            <div class="empty-text">暂无项目</div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar-right">
            <!-- 快速统计 -->
            <div class="quick-stats">
                <h3 class="section-title mb-4">快速统计</h3>
                <div class="quick-stat-item">
                    <span class="quick-stat-label">待处理任务</span>
                    <span class="quick-stat-value">{{ stats.pending_tasks if stats else 0 }}</span>
                </div>
                <div class="quick-stat-item">
                    <span class="quick-stat-label">进行中的项目</span>
                    <span class="quick-stat-value">{{ stats.active_projects if stats else 0 }}</span>
                </div>
                <div class="quick-stat-item">
                    <span class="quick-stat-label">本月新增客户</span>
                    <span class="quick-stat-value">{{ stats.new_customers_month if stats else 0 }}</span>
                </div>
                <div class="quick-stat-item">
                    <span class="quick-stat-label">本周工时</span>
                    <span class="quick-stat-value">{{ stats.weekly_hours if stats else 0 }}h</span>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="activities-section">
                <div class="section-header">
                    <h2 class="section-title">最近活动</h2>
                </div>
                <div class="activity-list">
                    {% if activities %}
                        {% for activity in activities[:6] %}
                        <div class="activity-item-pingcode">
                            <div class="activity-avatar">
                                {{ activity.user.name[0] if activity.user and activity.user.name else '系' }}
                            </div>
                            <div class="activity-content">
                                <div class="activity-text">
                                    <strong>{{ activity.user.name if activity.user else '系统' }}</strong>
                                    {{ activity.activity_type }}
                                    {{ activity.target_type }}
                                </div>
                                <div class="activity-time">
                                    {{ activity.activity_time.strftime('%m月%d日 %H:%M') }}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="empty-text">暂无活动</div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}